<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>听写-pyaudio</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        body {
            overflow-y: hidden;
            background-color: darkblue;
        }

        .contain {
            margin: 20px;
            border: rgba(255, 255, 255, 0.5) 3px solid;
            height: calc(100% - 40px);
        }

        .text {
            margin: 20px;
            color: white;
            font-size: 80px;
            /*font-family: "微软雅黑",sans-serif;*/
            font-family: monospace, sans-serif;
            height: calc(50% - 30px);
        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
                color: white;
            }
            100% {
                opacity: 0;
                color: transparent;
            }
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
                color: transparent;
            }
            100% {
                opacity: 1;
                color: white;
            }
        }

        @keyframes borderInOut {
            0%,100% {
                border: rgba(255, 255, 255, 0.3) 3px solid;
            }
            100% {
                border: rgba(255, 255, 255, 0.8) 3px solid;
            }
        }

        .animated-out-text {
            animation: fadeOut 0.5s infinite;
            animation-iteration-count: 1;
        }

        .animated-in-text {
            animation: fadeIn 0.5s infinite;
            animation-iteration-count: 1;
        }

        .animated-border {
            animation: borderInOut 4s infinite;
        }
    </style>
</head>
<body>
<div class="contain animated-border">
    <div class="text" id="text1">

    </div>
    <div class="text" id="text2">

    </div>
</div>
<script>
    let text1 = document.getElementById("text1")
    let text2 = document.getElementById("text2")
    let timestamp = ''
    let transContext = ''

    let askInterval = self.setInterval(ask, 100)
    let writeInterval = self.setInterval(write, 200)

    function ask() {
        fetch('/text')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }
                return response.json();
            })
            .then(data => {
                if (data.timestamp !== timestamp) {
                    timestamp = data.timestamp
                    // 上一段对话结束，对话上移动
                    if (data.result.end_time == null) {
                        if (transContext !== '') {
                            text2.innerText = text2.innerText + transContext
                        }
                        let oldText = text2.innerText
                        let oldLength = oldText.length
                        let newText = data.result.text
                        let newLength = newText.length
                        text2.innerText = newText.substring(0, oldLength)
                        transContext = newText.substring(oldLength, newLength)
                    } else {
                        text2.innerText = ''
                        text1.className = 'text animated-out-text'
                        setTimeout(function () {
                            text1.innerText = data.result.text
                            text1.className = 'text animated-in-text'
                        }, 500);
                    }
                }
            })
            .catch(error => {
                console.error('发生错误:', error);
            });
    }

    function write() {
        if (transContext !== '') {
            let first = transContext.substring(0, 1);
            transContext = transContext.substring(1, transContext.length)
            text2.innerText = text2.innerText + first
        }
    }

    // 判断字符串前几位一致
    function areFirstNCharactersEqual(str1, str2) {
        let n = str1.length
        let temp;
        for (let i = 5; i > 0; i--) {
            temp = Math.floor((n / 5) * i)
            if (str1.substring(0, temp) === str2.substring(0, temp))
                return temp
        }
    }
</script>
</body>
</html>